<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div class="table-header">
            工器具列表
          </div>
          <el-table v-loading="loading" :data="list" class="table">
            <el-table-column label="工器具id" align="center" prop="materialId"v-if="false" />
            <el-table-column label="工器具编码" align="center" prop="materialCode" />
            <el-table-column label="工器具名称" align="center" prop="materialName" />
            <el-table-column label="状态" align="center" prop="materialStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ma_pre_status" :value="scope.row.materialStatus" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="deleteItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="button-row">
            <el-col :span="24" class="button-col">
              <el-button type="text" size="small" @click="clearList" class="clear-button">清空列表</el-button>
              <el-button type="primary" size="small" @click="submitList">提交</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  submitMaterialInfo
} from "@/api/elec/elecMaterialOutDetail"; // 导入保存数据的后台方法
import {
  EventBus
} from '../utils/eventbus.js';

export default {
  dicts: ['ma_pre_status'],
  data() {
    return {
      socket: null,
      materialId: '',
      // 列表数据
      list: [],
      loading: false,
      // 查询参数
      queryParams: {
        elecMaterialOutdetailList: []
      },
    };
  },
  mounted() {},
  created() {
    EventBus.$off('auto_login');
    EventBus.$on("material_in", this.handleMaterialInMessage);
    EventBus.$on("material_out", this.handleMaterialOutMessage);
    EventBus.$on("auto_login",this.handleAutoLogin)
  },
  methods: {
    handleAutoLogin(message){
      localStorage.setItem('auto_login_data', JSON.stringify(message));

      this.$store.dispatch('LogOut').then(() => {
        location.href = '/index';
      })
    },
    handleMaterialInMessage(message) {
      const existingItem = this.list.some(item => item.materialCode === message.in.materialCode);
      if (!existingItem) {
        this.list.push(message.in);
      }
    },
    handleMaterialOutMessage(message) {
      const existingItem = this.list.some(item => item.materialCode === message.out.materialCode);
      if (!existingItem) {
        this.list.push(message.out);
      }
    },
    deleteItem(row) {
      const index = this.list.indexOf(row);
      if (index !== -1) {
        this.list.splice(index, 1);
      }
    },
    clearList() {
      this.list = [];
    },
    submitList() {
      this.queryParams.elecMaterialOutdetailList = this.list;
      submitMaterialInfo(this.queryParams)
        .then(response => {
          console.log("成功");
          // 提交成功的处理逻辑
          this.$modal.msgSuccess("提交成功");
          this.list = [];
        })
        .catch(error => {
          // 提交失败的处理逻辑
          this.$modal.error("提交失败");
          console.log("失败");
        });
    }
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-box {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.clear-button {
  margin-right: 10px;
}

.table {
  width: 100%;
}

.button-row {
  margin-top: 20px;
  text-align: right;
}

.button-col {
  text-align: right;
}
</style>
